<template>
  <div style="border: 1px solid black; padding: 20px">
    <div>父组件</div>

    <!--方式一：注意属性名必须为modelValue -->
    <!--自定义组件-->
    <ModelChild v-model="info" />
    <!--原生组件-->
    <input type="text" v-model="info" />

    <!--方式二： 自定义组件上使用v-model:xxx=yyy，必须要求：
        1、v-model:xxx。含义是子组件必须定义属性xxx ，变量yyy的值会传入这个属性。(v-model=yyy，其实是默认绑定了一个属性modelValue)
        2、子组件必须要抛出update:xxx事件，该事件的参数会直接赋值给v-model绑定的yyy
    -->
    <!--<ModelChild v-model:a="info" v-model:b="info" />-->
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ModelChild from './ModelChild.vue'
let info = ref('')
</script>
<style scoped></style>
